<template>
  <div class="index">
    <div class="top-region">
      <div class="top-container">
        <span v-if="!userInfo.userId"
              class="goLogin"
              @click="goLogin()">去登录</span>
        <span v-else>
          {{ userInfo.username }}，
          <span class="goLogin"
                @click="logout()">退出登录</span>
        </span>
        <div v-if="userInfo.userId"
             class="top-right">
          <span @click="goPage('bigdata-home')">大数据平台</span>
          <span @click="goPage('shop-cart')">购物车</span>
          <span @click="goPage('shop-order')">我的订单</span>
          <span @click="goPage('shop-setting')">个人设置</span>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="left">
        <img src="./static/logo.png"
             alt=""
             class="imgLogo">
        <div class="worth">
          <div class="top">中药材电子商务平台</div>
          <div class="center2">——————————————</div>
          <div class="bottom">中药材质量溯源系统</div>
        </div>
      </div>
      <div class="center">
        <div class="worth">
          <div class="top">资质认证</div>
          <div class="center2">厂家直销</div>
          <div class="bottom">溯源管理</div>
        </div>
      </div>
      <div class="right">
        <el-input v-model="keyword"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search" />
        <el-button class="btn"
                   @click="goProductPage">搜索</el-button>
      </div>
    </div>
    <div class="nagv">
      <div class="navigation">
        <el-menu :default-active="curMenuIndex"
                 height="142px"
                 background-color="rgb(133, 194, 38)"
                 class="el-menu-demo"
                 text-color="black"
                 active-background-color="rgb(0, 146, 63)"
                 active-text-color="rgb(255,255,255)"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item v-for="(menu,index) in menuList"
                        :key="index"
                        style="width:14.25%;text-align:center"
                        :index="String(index)">{{ menu.name }}</el-menu-item>
        </el-menu>
      </div>
    </div>
    <router-view style="min-height:800px;width:1100px;margin:0 auto;" />
    <div class="footer" />
  </div>
</template>

<script>
import { getUserById } from '@/api/mall/user'
import Cookies from 'js-cookie'
export default {
  name: 'Reception',

  data () {
    return {
      menuList: [
        {
          name: '首页',
          path: '/home'
        },
        {
          name: '电子商务',
          path: '/commerce'
        },
        {
          name: '安全溯源',
          path: '/secureTraceability'
        },
        {
          name: '行业标准',
          path: '/IndustryStandards'
        },
        {
          name: '企业列表',
          path: '/receptionCompany'
        },
        {
          name: '关于我们',
          path: '/about'
        },
        {
          name: '名优品种',
          path: '/categoryDetail'
        }
      ],
      curMenuIndex: '0',
      keyword: '',
      userInfo: {}
    }
  },
  watch: {
    // 监视$route对象的变化
    '$route': {
      handler (to, from) {
        const currentPath = this.$route.path
        const activeItem = this.menuList.find(item => item.path === currentPath)
        let flag = 0
        for (let i = 0; i < this.menuList.length; i++) {
          if (this.menuList[i].path == currentPath) {
            this.curMenuIndex = String(i)
            flag = 1
          }
        }
        if (!flag) {
          this.curMenuIndex = String(-1)
        }
      },
      deep: true // 深度监视$route对象的变化
    }
  },
  mounted () {
    const token = Cookies.get('token')
    if (token) {
      this.$getUserId(true).then(userId => {
        if (userId) {
          getUserById(userId).then(res => {
            this.userInfo = res.data
          })
        } else {
          this.userInfo = {}
        }
      })
    }
  },
  methods: {
    handleSelect (index) {
      this.$router.push(this.menuList[index].path)
    },
    goLogin () {
      this.$router.push('/login')
    },
    logout () {
      this.userInfo = {}
      Cookies.remove('token')
    },
    goPage (path) {
      this.$router.push(path)
    },
    goProductPage () {
      if (!this.keyword) {
        this.$message.error('请输入搜索内容')
        return;
      }
      this.$router.push('/receptionProduct?keyword=' + this.keyword)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  height: 142px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .top-region {
    width: 100%;
    height: 25px;
    padding: 2.5px;
    background-color: rgb(133, 194, 38);

    .top-container {
      margin: 0 auto;
      width: 1100px;

      .goLogin {
        cursor: pointer;
      }

      .top-right {
        float: right;
        span {
          margin: 0 5px;
          cursor: pointer;
        }
        span:hover {
          color: red;
        }
      }
    }
  }

  .header {
    height: 115px;
    width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 450px;
      height: 90px;
      display: flex;

      .imgLogo {
        width: 110px;
        height: 110px;
      }

      .worth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;

        .center2 {
          display: flex;
          justify-content: center;
          font-weight: 900;
          align-items: center;
          height: 30px;
        }

        .top {
          letter-spacing: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: 800;
          height: 30px;
        }

        .bottom {
          letter-spacing: 8px;
          font-size: 18px;
          font-weight: 800;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 30px;
        }
      }
    }

    .center {
      width: 270px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;

      .worth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;

        .center2 {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }

        .top {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }

        .bottom {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 290px;
      height: 90px;
    }
  }
  .btn {
    height: 35px;
    width: 68px;
    background-color: #85c226;
    margin-left: 2px;
    border: none;
    color: #fff;
    float: left;
    cursor: pointer;
    border-radius: 5px;
  }
  .nagv {
    width: 100%;
    background-color: rgb(133, 194, 38);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .navigation {
      width: 1100px;
    }
  }
}

.footer {
  margin-top: 20px;
  background-color: rgb(133, 194, 38);
  width: 100%;
  height: 100px;
}
</style>
